<style lang="less" scoped>
	.container {
		// padding: 0 30rpx;
		padding-top: 140rpx;
	}
	.d_in_block{
		display: inline-block;
	}
	.search {
		margin-left: 40rpx;
		position: relative;
    top: 21rpx;
    height: 60rpx;
	line-height: 60rpx;
	}
	.scroll-view-item_H {
		width: 1200rpx;
	}
	.success {
			color: #09BB07;
	}
	.editForm {
		// width: 100vh;
		// position: fixed;
		top: 15rpx;
	}
</style>
<template>
	<view>
		<uni-nav-bar class="bold" left-icon="back" title="预约历史记录" fixed="true" shadow="false" @clickLeft="leftBack"></uni-nav-bar>
		<div class="container" v-show="container">
			<uni-forms :value="pagingQuery" ref="form" validate-trigger="bind" err-show-type="undertext">
				<uni-group title="个人预约记录" top="0">
						<uni-forms-item class="d_in_block"  name="param" border label-width="80" label="被访人信息:"><uni-easyinput type="text" :inputBorder="true" v-model="pagingQuery.param" placeholder="请输入姓名/手机号"></uni-easyinput> </uni-forms-item>
						<button class="search d_in_block" type="primary" size="mini" @click="onSearch()">查询</button>
				</uni-group>
			</uni-forms>
			
				<!-- <data-list class="data-list" ref="visitorMsgList"  style="width: 1200rpx;" @load="handleLoad" @refresh="handleRefresh"> -->
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view style="1200rpx">
					<uni-table stripe type emptyText="暂无更多数据">
					    <!-- 表头行 -->
					    <uni-tr>
							<uni-th align="left" width="90">操作</uni-th>
					        <uni-th align="center" width="70">被访人</uni-th>
					        <uni-th align="center" width="170">状态</uni-th>
					        <uni-th align="left">访问日期</uni-th>
							<uni-th align="center">访问事由</uni-th>
							<uni-th align="center" width="100">被访人电话</uni-th>
					    </uni-tr>
					    <!-- 表格数据行 -->
					    <uni-tr v-for="(visitorMsg, index) in visitorMsgList" :key="index">
						    <uni-td><span>
							<uni-icons @click="editHandle(visitorMsgList[index])" type="compose" size="28" color="#1aad19" style="margin-left: -20rpx;margin-right: 10rpx;" v-show="visitorMsgList[index].status !== 'auth' && visitorMsgList[index].status !== 'un_auth' ? false : true"></uni-icons>
							<uni-icons @click="deleteHandle(visitorMsgList[index].id)" type="trash" size="28" color="#ffba00"></uni-icons></span></uni-td>
						    <uni-td>{{visitorMsg.intervieweeName}}</uni-td>
						    <uni-td><span :class="visitorMsgList[index].status == 'auth' ? 'success' : ''">{{visitorMsg.status | filterStatus}}</span></uni-td>
					        <uni-td><span style="line-height: 38rpx;white-space: nowrap;">{{visitorMsg.visitStartTime | filterTime}}</span></uni-td>
						    <uni-td>{{visitorMsg.remark}}</uni-td>
						    <uni-td>{{visitorMsg.intervieweePhone}}</uni-td>
					    </uni-tr>
					</uni-table>
				</view>
			</scroll-view>
		<!-- </data-list> -->
			 
		</div>
		<view v-if="editForm" class="editForm">
			<view><uni-icons type="closeempty"></uni-icons></view>
			<SubmitVisitor :formData="formData" @refresh="refreshHadnle"/>
		</view>
	</view>
</template>

<script>
	import { leftBack } from '../../commom/js/utils.js'
	import { searchVisitorMsg, deleteVisitorMsg } from '../../api/visitor.js'
	import SubmitVisitor from './components/SubmitVisitor'

	let  getVisitorAuthorized = [
      { id:'auth', value: '已授权' },
      { id: 'unAuth', value: '未授权' },
      { id: 'refuse', value: '已拒绝' },
      { id: 'expire', value: '已过期' }
     ]
	 
	export default{
		components: {
			SubmitVisitor
		},
		data() {
			return {
				container: true,
				formData: {
				},
				editForm: false,
			   old: {
                scrollTop: 0
            },
				pagingQuery: {
					param: '',
					current:1,
					size: 1000000,
				},
				total: 0,
				visitorMsgList: [],
			}
		},
		filters:{
			filterTime(value) {
				let v = value.slice(-3);
				return value.replace(v, '');
			},
			filterStatus(string) {
			  let authorized = null;
			    for(let i = 0; i < getVisitorAuthorized.length; i++) {
			      if(getVisitorAuthorized[i].id === string) {
			        authorized = getVisitorAuthorized[i].value;
			      }
			    }
			    return authorized
			}
		},
		methods: {
			leftBack() {
			  leftBack()
			},
			onSearch() {
				uni.showLoading({
					title: '加载中...'
				});
			searchVisitorMsg(this.pagingQuery).then(res => {
				let data = res.data;
				if(data.code === 0) {
					if(data.data.records.length !== 0) {
						this.visitorMsgList = data.data.records;
					} else {
						this.visitorMsgList = []
					}
				   setTimeout(() => {
					   uni.hideLoading()
				   },100);
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			})
			},
			deleteHandle(id) {
				deleteVisitorMsg(id).then(res => {
					let data = res.data;
					if(data.code === 0) {
						uni.showToast({
							title: data.msg
						});
						this.onSearch();
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none'
						})
					}
				})
			},
			editHandle(data) {
				this.editForm = true;
				this.container = false;
				this.formData = data
			},
			refreshHadnle() {
				this.onSearch();
				this.editForm = false;
				this.container = true;
			},
			getVisitorList() {
				
			},
			// 请求加载数据
			handleLoad(data, callback) {
			 // this.onSearch();
				setTimeout(() => {
					// let visitorMsgList = [];
					// for (var i = 0; i < 3; i++) {
					// 	visitorMsgList.push(i);
					// }
					// this.visitorMsgList = [...this.visitorMsgList, ...this.visitorMsgList];
					callback({ list: this.visitorMsgList, total: 3 });
			}, 1500)
			},
			// 模拟请求数据刷新
			handleRefresh(data, callback) {
			   this.onSearch();
				setTimeout(() => {
					// this.visitorMsgList = [];
					// for (var i = 0; i < 3; i++) {
					// 	this.visitorMsgList.push(i);
					// }
					callback({ list: this.visitorMsgList, total: 3 });
				}, 1500);
			},
			 scroll: function(e) {
			            console.log(e)
			            this.old.scrollTop = e.detail.scrollTop
			        },
		},
		created() {
			this.onSearch()
		}
	}
</script>